<!DOCTYPE html>
<html>
    <head>
        <title>blog {% block title%}个人博客-静心之地{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script type="text/javascript" src="/static/jquery-3.6.0.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script type="text/javascript" src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    </head>
    <body background='/static/img/bg.jpeg'>
        <div class="container">
            <div id="left" class="row">
                <div class="col"></div>
    <div id="center" class="col">
            <div class="border" style="margin:150px;background-color:white">

                <div id="topmessage" class="text-center">
                    {% if message.success %}
                    <p>signin Success!</p>
                    <p>username:{{ message.username }}</p>
                    <p><a href="/accounts/login/?next=/blog/">去登录</a></p>
                    {% else %}
                        {% if message.info %}
                        <p>两次密码输入不一致</p>
                        {% else %}
                        <p>{{form.errors}}</p>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="justify-content-center">
                    <form method="POST" action="/blog/userregister/">
                        {% csrf_token %}
                        <table class="table align-middle">
                        <tr>
                            <td>username:</td>
                            <td><input type="text" name="username"  value="{{ message.username }}"></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email" name="email"></td>
                        </tr>
                        <tr>
                            <td>password:</td>
                            <td><input type="password" name="password"></td>
                        </tr>
                        <tr>
                            <td>password confirm:</td>
                            <td><input type="password" name="confirmpassword"></td>
                        </tr>
                        </table>
                        <p class="text-center"><input class="btn btn-success" type="submit" value="Register"></p>
                        <input type="hidden" name="next" value="{{ next }}">
                    </form>
                </div>
                </div>
    </div>
    <div id="right" class="col"></div>
            </div>
        </div>
        </div>
    </body>
    <script type="text/javascript">
      $(function(){
        $("[name='username']").blur(function(){
          //$(this).attr({'style':'background:yellow'});
        });
        $("[name='confirmpassword']").blur(function(){
          //alert("check confirmpassword");
        });

        $("[name='username']").focus(function(){
          //$(this).attr({'style':''});
        });
      });
    </script>
</html>
